<template>
  <div style="height: 240px">
    <ChartView ref="chartViewRef"></ChartView>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const chartViewRef = ref()

const option = {
  /**
   * x坐标轴配置
   */
  xAxis: {
    /**
     * 坐标轴类型
     * 'value' 数值轴，适用于连续数据。
     * 'category' 类目轴，适用于离散的类目数据。
     * 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
     * 'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
     */
    type: 'category',
    /**
     * x轴数据
     */
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  /**
   * y坐标轴配置
   */
  yAxis: {
    type: 'value',
  },
  /**
   * 图表配置
   */
  series: [
    {
      /**
       * 图表类型
       */
      type: 'bar',
      /**
       * 图表数据
       */
      data: [120, 200, 150, 80, 70, 110, 130],
      /**
       * 标注线配置
       */
      markLine: {
        /**
         * 标注线文字配置
         */
        label: {
          // 显示标注线文字
          show: true,
          // 标注线文字显示在顶部(左侧)
          position: 'start',
          // 颜色为黄色
          color: 'orange',
        },
        // 标注线的首尾都不绘制图形
        symbol: ['none', 'none'],
        // 标注线颜色和线条粗细配置
        lineStyle: {
          color: 'red',
          width: 3,
        },
        // 鼠标移入到标注线上时的样式设置
        emphasis: {
          // 鼠标移入标注线，将标注线设置为绿色实线
          lineStyle: {
            color: 'green',
            type: 'solid',
          },
        },
        data: [
          {
            name: 'y轴值为80的水平线',
            // 使用默认标注线配置，因此该条线的颜色为红色虚线，且左侧会有黄色的文案
            yAxis: 80,
          },
          {
            name: 'y轴值为170的水平线',
            yAxis: 170,
            // 使用自定义的标注线配置，因此该条线的颜色为绿色虚线
            lineStyle: {
              color: 'green',
              width: 5,
            },
            label: {
              // 这里设置为false，所以默认左侧的文案将不可见
              show: false,
            },
          },
        ],
      },
    },
  ],
}

onMounted(() => {
  chartViewRef.value.setOption(option)
})
</script>
